<template>
	<div class="article-body">
		<div class="article-write">
			<div class="article-box">
				<div class="article-head">
					<input type="text" placeholder="标题" v-model="title" /><br />
					<input type="text" placeholder="图片url" v-model="imgurl" />
					<select v-model="tab">
						<option :value="item.id" v-for="item in Tabs">{{item.tab_name}}</option>
					</select>
				</div>
				<div class="editor-wrapper">
					<div class="editor-container">
						<Toolbar :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
						<Editor v-model="editorContent" :defaultConfig="editorConfig" :mode="mode"
							@onCreated="handleCreated" @onChange="handleChange" style="height: 100%;" />
					</div>
					<div class="preview-container">
						<div class="preview-title">预览效果
							<input type="color" v-model="textColor" @change="updateTextColor" />
						</div>
						<div class="preview-content" v-html="previewContent" :style="{ color: textColor }"></div>
					</div>
				</div>
				<div class="article-btn">
					<button @click="articlesubmit">提交</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import '@wangeditor/editor/dist/css/style.css';
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue';
	import axios from "@/api/apiaxios";

	const textColor = ref('#000000');
	const editor = ref(null);
	const editorContent = ref('');
	const previewContent = ref('');
	const title = ref('');
	const imgurl = ref('');
	const mode = ref('default');
	const Tabs = ref([]);
	const tab = ref('');

	const toolbarConfig = {
		excludeKeys: ['fullScreen']
	};

	const editorConfig = {
		placeholder: '请输入你想发布的文章',
		MENU_CONF: {}
	};

	const handleCreated = (editorInstance) => {
		editor.value = editorInstance;
	};

	const handleChange = (editorInstance) => {
		// 获取编辑器内容
		let content = editorInstance.getHtml();
		
		// 创建一个临时的 DOM 元素来解析 HTML
		const tempDiv = document.createElement('div');
		tempDiv.innerHTML = content;
		
		// 移除所有内联的 color 样式
		const elements = tempDiv.getElementsByTagName('*');
		for (let element of elements) {
			if (element.style.color) {
				element.style.removeProperty('color');
			}
		}
		
		// 更新预览内容
		previewContent.value = tempDiv.innerHTML;
	};

	function getTab() {
		const res = axios.post("/api/tabs/selecteq", {

		}, {
			headers: {
				'Content-Type': 'application/json'
			}
		});

		res
			.then(response => {

				if (response.data.code == 200) {
					Tabs.value = response.data.data;
					console.log(Tabs.value);
				} else {
					console.log('查询失败:', response.data.message);
				}
			})
			.catch(error => {
				if (error.response) {
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					console.log('没有收到响应:', error.request);
				} else {
					console.log('错误信息:', error.message);
				}
			});
	}


	function articlesubmit() {
		if (!editor.value) return;

		const username = JSON.parse(sessionStorage.getItem("user")).id;

		const content = editor.value.getHtml();
		console.log(content);


		const data = {
			author_id: username,
			title: title.value,
			url: imgurl.value,
			time: null,
			content: content,
			tab_id:tab.value,
		};

		console.log(data);
		axios.post("/api/article/insert", data, {
			headers: {
				'Content-Type': 'application/json'
			}
		}).then(response => {
			console.log(response.data);
			if (response.data.code == 200) {
				alert("提交成功");
			} else {
				console.log('提交失败:', response.data.message);
			}
		})
		.catch(error => {
			if (error.response) {
				console.log('响应状态码:', error.response.status);
				console.log('响应数据:', error.response.data);
			} else if (error.request) {
				console.log('没有收到响应:', error.request);
			} else {
				console.log('错误信息:', error.message);
			}
		});
	}

	onMounted(() => {
		getTab();
	});
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		font-size: 14px;
		color: #000000;
	}

	.article-body {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: url('../../../../img/3.jpg');
		// background-color: rgba(255, 255, 255, 0.2);
		// background-color: rgba(0, 0, 0, 0.5);
		// opacity: 0.3;
		/* 白色背景，透明度为0.5 */
		background-blend-mode: lighten;

		/* 可以根据需要调整混合模式 */
		.article-write {
			width: 80%;
			height: 800px;
			// background-color: aqua;
			border: 1px solid #d9d9d9;
			border-radius: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			.article-box {
				width: 90%;
				height: 100%;

				.article-head {
					width: 100%;
					height: 10%;
					display: flex;
					align-items: center;
					justify-content: center;

					input {
						width: 250px;
						height: 40px;
						margin: 40px;
					}

					select {
						width: 150px;
						height: 40px;
						/* 设置下拉框的最大高度为200像素，你可以根据需要调整这个值 */
						overflow-y: auto;
						/* 当内容超出最大高度时，显示垂直滚动条 */
					}

				}

				.editor-wrapper {
					display: flex;
					width: 100%;
					height: 70%;
					gap: 20px;

					.editor-container {
						flex: 1;
						display: flex;
						width: 60%;
						flex-direction: column;
						border: 1px solid #ccc;
						overflow: hidden;

						:deep(.w-e-toolbar) {
							border-bottom: 1px solid #ccc;
						}

						:deep(.w-e-text-container) {
							flex: 1;
							overflow-y: auto;
						}
					}

					.preview-container {
						width: 40%;
						border: 1px solid #ccc;
						padding: 10px;
						// overflow-y: auto;


						.preview-title {
							font-weight: bold;
							margin-bottom: 10px;
							padding-bottom: 10px;
							border-bottom: 1px solid #ccc;
							color: #8bfcfd;
						}

						.preview-content {
							height: calc(100% - 30px);
							overflow-y: auto;
							
							:deep(*) {
								color: inherit !important;
							}
						}
					}
				}

				.article-btn {
					width: 100%;
					height: 20%;
					display: flex;
					justify-content: center;
					align-items: center;

					button {
						width: 200px;
						height: 60px;
						cursor: pointer;
					}
				}
			}

		}
	}


	:deep(.ql-toolbar.ql-snow) {
		background-color: #f8f9fa;
		/* Lighter grey background */
		border: 1px solid #dee2e6;
		border-bottom: 0;
		/* Remove bottom border if editor border is present */
		border-top-left-radius: 5px;
		/* Optional: round corners */
		border-top-right-radius: 5px;
		/* Optional: round corners */
	}


	/* Style the editor container itself (sibling to toolbar) */
	:deep(.ql-container.ql-snow) {
		border: 1px solid #dee2e6;
		border-bottom-left-radius: 5px;
		/* Optional: round corners */
		border-bottom-right-radius: 5px;
		/* Optional: round corners */
		background-color: #ffffff;
		/* Ensure editor area is white */
	}

	/* Change the color of toolbar buttons */
	:deep(.ql-snow .ql-formats button) {
		color: #495057;
		/* Dark grey button icons/text */
		transition: background-color 0.2s ease;
		/* Smooth hover effect */
	}

	/* Change hover state of toolbar buttons */
	:deep(.ql-snow .ql-formats button:hover) {
		background-color: #e9ecef;
		/* Light grey background on hover */
		color: #0056b3;
		/* Blue color on hover */
	}

	/* Change the background/color of active/selected buttons */
	:deep(.ql-snow .ql-formats button.ql-active) {
		background-color: #cfe2ff;
		/* Light blue background when active */
		color: #0a3622;
		/* Darker color when active */
	}

	/* Style dropdown labels (like Font size, Header) */
	:deep(.ql-snow .ql-picker-label) {
		color: #495057;
		/* Match button color */
		transition: background-color 0.2s ease;
	}

	:deep(.ql-snow .ql-picker-label:hover) {
		background-color: #e9ecef;
		color: #0056b3;
	}

	/* Style dropdown options */
	:deep(.ql-snow .ql-picker-options .ql-picker-item) {
		color: #212529;
		/* Standard text color for options */
	}

	:deep(.ql-snow .ql-picker-options .ql-picker-item:hover) {
		background-color: #f8f9fa;
		color: #0056b3;
	}

	/* Style selected dropdown option */
	:deep(.ql-snow .ql-picker-options .ql-picker-item.ql-selected) {
		background-color: #cfe2ff !important;
		/* Use !important if needed to override defaults */
		color: #0a3622;
	}

	/* Example: Change color picker squares */
	:deep(.ql-snow .ql-color-picker .ql-picker-item) {
		width: 20px;
		/* Adjust size if needed */
		height: 20px;
	}

	/* Customize the tooltip text (e.g., "Bold") */
	:deep(.ql-snow .ql-tooltip) {
		background-color: #343a40;
		/* Dark background */
		color: #fff;
		/* White text */
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}


	:deep(.ql-snow .ql-tooltip input) {
		/* Style input inside tooltip if needed */
		color: #333;
	}
</style>